<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 600px;
      margin: 0 auto;
      margin-top: 40px;
    }
  </style>
</head>

<body>
  <div class="box">
    <h1>添加学生信息</h1>
    <form action="">
      <p>
        <label for="class">班级：</label>
        <input type="text" name="clazz" id="class">
      </p>
      <p>
        <label for="name">姓名：</label>
        <input type="text" name="name" id="name">
      </p>
      <p>
        <label for="gender">性别：</label>
        <input type="radio" name="gender" id="gender1" value="男">男
        <input type="radio" name="gender" id="gender2" value="女">女

      </p>
      <p>
        <label for="age">年龄：</label>
        <input type="text" name="age" id="age">
      </p>
      <p>
        <label for="hobby">爱好：</label>
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="睡觉">睡觉
        <input type="checkbox" name="hobby" alue="学习">学习
      </p>
      <p>
        <label for="tel">电话：</label>
        <input type="text" name="tel" id="tel">
      </p>
      <p>
        <label for="address">地址：</label>
        <select name="address" id="address">
          <option value="郑州">郑州</option>
          <option value="新乡">新乡</option>
          <option value="洛阳">洛阳</option>
        </select>
      </p>
      <p>
        <label for="remark">备注：</label>
        <textarea name="remark" id="remark" cols="30" rows="10"></textarea>
      </p>
      <p>
        <label for="date">入学时间：</label>
        <input type="date" name="date" id="date">
      </p>
      <input type="submit" value="保存">
    </form>

  </div>
  <script src="./js/utils.js"></script>
  <script>
    var uform = document.querySelector('form')
    uform.addEventListener('submit', function (e) {
      e.preventDefault()
      console.log(e);
      console.log(this);
      var data = serializeKeyValue(document.querySelector('form'))
      let xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          if (xhr.status >= 200 && xhr.status <= 304) {
            window.location.href = 'index.html'
          }
        }
      }
      let url = 'http://localhost:3008/api/student/addStudent'
      xhr.open('POST', url)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(data)
    })


  </script>
</body>

</html>